<template>
  <div class="login-container">
    <div class="login-box">
      <h2 class="title">YX后台管理系统</h2>
      <el-tabs v-model="loginType" class="login-tabs" stretch>
        <el-tab-pane label="帐号登录" name="account">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><User /></el-icon>
              <span>帐号登录</span>
            </span>
          </template>
          <el-form :model="accountForm" ref="accountFormRef" :rules="accountRules">
            <el-form-item prop="username" label="帐号">
              <el-input v-model="accountForm.username" placeholder="请输入帐号">
                <template #prefix>
                  <el-icon class="el-input__icon"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                v-model="accountForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
              >
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <div class="form-options">
              <el-checkbox v-model="accountForm.remember">记住密码</el-checkbox>
              <el-link type="primary" @click="handleForgetPassword">忘记密码？</el-link>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="phone">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Iphone /></el-icon>
            </span>
            <span>手机号登录</span>
          </template>
          <el-form :model="phoneForm" ref="phoneFormRef" :rules="phoneRules">
            <el-form-item prop="phone">
              <el-input v-model="phoneForm.phone" placeholder="请输入手机号">
                <template #prefix>
                  <el-icon class="el-input__icon"><Iphone /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="phoneForm.code" placeholder="请输入验证码">
                <template #append>
                  <el-button @click="getCode" :disabled="counting > 0" class="code-btn">
                    {{ counting > 0 ? `${counting}s后重新获取` : "获取验证码" }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="login-btn" @click="handleLogin" size="large">
        立即登录
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import type { FormInstance, FormRules } from "element-plus/es"
import useLoginStore from "@/store/login/login"
import type { LoginFormData } from "../../types/login"
import { localCache } from "@/utils/cache"
const loginStore = useLoginStore()
const loginType = ref("account")
const accountFormRef = ref<FormInstance>()
const phoneFormRef = ref<FormInstance>()
const accountForm = reactive<LoginFormData>({
  username: localCache.getCache("username") || "",
  password: localCache.getCache("password") || "",
  remember: localCache.getCache("remember") || false
})
const phoneForm = reactive({
  phone: "",
  code: ""
})
const accountRules: FormRules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
}
const phoneRules: FormRules = {
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
  ],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
}

const counting = ref(0)

const getCode = () => {
  if (counting.value > 0) return
  counting.value = 60
  const timer = setInterval(() => {
    counting.value--
    if (counting.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}
const handleLogin = async () => {
  const formRef = loginType.value === "account" ? accountFormRef.value : phoneFormRef.value
  if (!formRef) return
  await formRef.validate((valid) => {
    if (valid) {
      let username = accountForm.username
      let password = accountForm.password
      let remember = accountForm.remember
      loginStore.loginAction({ username, password, remember })
    } else {
      ElMessage.error("Oops, 请检查表单输入是否正确")
    }
  })
}
const handleForgetPassword = () => {
  console.log("忘记密码")
}
</script>

<style scoped lang="scss">
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/img/bg3.jpg");
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .login-box {
    position: relative;
    z-index: 1;
    width: 350px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);

    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
      font-size: 24px;
    }

    .login-tabs {
      margin-bottom: 20px;
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 20px;
    }

    .login-btn {
      width: 100%;
    }

    :deep(.code-btn) {
      padding: 0 15px;
      height: 32px;
    }
  }
}
</style>
